<template>
	<view class="tn-margin-bottom-lg">
		<block v-for="(item, index) in orderList" :key="index">
			<view class="article-shadow tn-margin">
				<view :class="oepnSwitch && checkIndex == index ? 'tn-flex tn-main-gradient-blue--light tn' : 'tn-flex'"
					@tap="handCheck(oepnSwitch, item, index)">
					<view class=" tn-margin-sm tn-padding-top-xs" style="width: 75%;">
						<!-- 标题 + 价格 在同一行（价格在右侧列对齐） -->
						<view class="tn-text-justify">
							<text class="title">{{ item.title }}</text>
						</view>
						<!-- 服务标签（左） + 状态（右列） -->
						<view class="tn-padding-top-xs" v-if="item.servicesList">
							<tn-tag backgroundColor="tn-main-gradient-blue" fontColor="tn-color-white" shape="radius"
								margin="8rpx 5rpx 8rpx" fontSize="18" height="36rpx"
								v-for="(label_item,label_index) in getLimitedServices(item)" :key="label_index">
								{{getServers(label_item) }}
							</tn-tag>
						</view>
						<view class="tn-flex tn-flex-row-start tn-flex-col-between tn-margin-top-xs" v-if="item.techList">
							<view v-for="(label_item,label_index) in getLimitedTech(item)" :key="label_index"
								class="justify-content-item tn-tag-content__item tn-margin-right tn-text-sm tn-text-bold">
								<text class="tn-tag-content__item--prefix">#</text>
								{{ getTech(label_item) }}
							</view>
						</view>
						<!-- 描述 一行省略 -->
						<view class="desc clamp-text-1 tn-margin-top-sm">
							<text>描述： </text>
							<text>{{ item.requirementDescription || '' }}</text>
						</view>
						<!-- 期望交付周期 一行 -->
						<view class="period tn-margin-top-sm">
							<text>期望交付周期： </text>
							<text>{{ formatDate(item.startTime) }} — {{ formatDate(item.projectEndTime) }}</text>
						</view>
					</view>
					<!-- 右列：金额（与标题同行右对齐）、状态（与标签同行右对齐） -->
					<view class="tn-flex tn-flex-direction-column tn-margin-sm tn-flex-col-center"
						style="width: 25%; align-items: flex-end;">
						<view class="price tn-margin-bottom-sm">
							{{ formatPrice(item.totalPrice) }}元
						</view>
						<block v-if="item.notSale == 1">
							<tn-tag backgroundColor="tn-main-gradient-blue--light" fontColor="tn-color-gray--dark"
								shape="circle" height="40rpx">
								非卖品
							</tn-tag>
						</block>
						<block v-else>
							<tn-tag :backgroundColor="`tn-main-gradient-${getBgColor(item.orderPayStatus)}--light`"
								:fontColor="`tn-color-${getFontColor(item.orderPayStatus)}`" shape="circle"
								height="40rpx" width="100">
								{{getText(item.orderPayStatus)}}
							</tn-tag>
						</block>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'lm-order-list',
		data() {
			return {
				checkIndex: -1,
				techDict: {},
				serversDict: {},
				orderStatus: global.staticDict.orderStatus,
			};
		},
		props: {
			orderList: {
				type: Array,
				default: []
			},
			oepnSwitch: {
				type: Boolean,
				default: false

			}
		},
		async created() {
			this.getDictInfo = this.$store.getters.getDictInfo
			this.techDict = this.getDictInfo.techDict
			this.serversDict = this.getDictInfo.serversDict
		},

		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
      handCheck(oepnSwitch, item, index) {
        if (oepnSwitch) {
          this.checked(index)
          return
        }
        const targetId = item.orderId || item.id
        if (targetId) {
          this.tn('/homepages/detail?id=' + targetId)
        }
      },
			//技术选型字典转换
			getTech(techKey) {
				return this.techDict[techKey] || techKey
			},
			getServers(serversKey) {
				return this.serversDict[serversKey] || serversKey
			},
			getLimitedServices(item) {
				const arr = Array.isArray(item.servicesList) ? item.servicesList : []
				return arr.slice(0, 6)
			},
			getLimitedTech(item) {
				const arr = Array.isArray(item.techList) ? item.techList : []
				return arr.slice(0, 3)
			},
			formatDate(val) {
				if (!val) return ''
				try {
					const d = new Date(val)
					if (Number.isNaN(d.getTime())) return val
					const y = d.getFullYear()
					const m = `${d.getMonth()+1}`.padStart(2, '0')
					const dd = `${d.getDate()}`.padStart(2, '0')
					return `${y}-${m}-${dd}`
				} catch (_) {
					return val
				}
			},
			formatPrice(val) {
				const n = Number(val)
				if (Number.isNaN(n)) return val || 0
				return n.toFixed(2)
			},
			//选中
			checked(index) {
				this.checkIndex = index;
				this.$emit('checkedClick', {
					index: index,
					orderId: this.orderList[index].orderId
				})
			},
			//标签背景颜色
			getBgColor(status = 1) {
				return this.orderStatus[status].bgColor
			},
			//标签字体颜色
			getFontColor(status = 1) {
				return this.orderStatus[status].color
			},
			//标签文本
			getText(status = 1) {
				return this.orderStatus[status].text
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1.4;
	}

	.price {
		font-size: 34rpx;
		font-weight: 700;
		color: #2F6BFF;
		white-space: nowrap;
	}

	.desc {
		color: #7A7E87;
		font-size: 24rpx;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.period {
		color: #9AA0A6;
		font-size: 24rpx;
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			color: #1D2541;
			background-color: #F3F2F7;
			border-radius: 10rpx;
			font-size: 20rpx;
            white-space: nowrap;
			padding: 5rpx 12rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}
</style>